<template>
	<view class="page">
		<view class="my_padding">
			<view class="newuser">
				<image class="newuser_tit" src="../../static/images/newuser-title.png"></image>
				<image class="newuser_icon" src="../../static/images/sign-coin.png"></image>
				<view class="newuser_contain">
					<u-steps :current="steps" dot class="bar_progress">
						<u-steps-item title="加入" ></u-steps-item>
						<u-steps-item title="实名认证" ></u-steps-item>
						<u-steps-item title="领体验金" ></u-steps-item>
						<u-steps-item title="完成首充"></u-steps-item>
					</u-steps>

				</view>
			</view>
			
			<image class="bartask" src="/static/images/bar_tasks.png"></image>
			
			<view class="taskList">
				<view class="taskItem">
					<image class="icon" src="/static/images/icon_task02.png"></image>
					<view class="task_tit">完成实名认证</view>
					<image class="coin" src="/static/images/icon-coin.png"></image>
					<view class="task_score">奖励{{getRealName}}积分</view>
					<view class="task_btn" @click="receiveTask(2)" v-if="newTaskStatus2 == 0">待完成</view>
					<view class="task_btn" @click="receiveTask(2)" v-else-if="newTaskStatus2 == 1">待领取</view>
					<view class="task_btn_rev" v-else>已领取</view>
				</view>
				<view class="taskItem">
					<image class="icon" src="/static/images/icon_task01.png"></image>
					<view class="task_tit">新手体验金</view>
					<image class="coin" src="/static/images/icon-coin.png"></image>
					<view class="task_score">新手可以领取{{getTrialMoney}}体验金</view>
					<view class="task_btn" @click="receiveTask(1)" v-if="newTaskStatus1 == 0">待领取</view>
					<view class="task_btn_rev" v-else-if="newTaskStatus1 == 1">已领取</view>
				</view>

				<view class="taskItem">
					<image class="icon" src="/static/images/icon_task03.png"></image>
					<view class="task_tit">完成首充</view>
					<image class="coin" src="/static/images/icon-coin.png"></image>
					<view class="task_score">奖励{{getFirstRecharge}}积分</view>
					<view class="task_btn" @click="receiveTask(3)" v-if="newTaskStatus3 == 0">待完成</view>
					<view class="task_btn" @click="receiveTask(3)" v-else-if="newTaskStatus3 == 1">待领取</view>
					<view class="task_btn_rev" v-else>已领取</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar/tabBar.vue'
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				user_bg: '',
				avatar: '/static/icon_avatar.png',
				userinfo: [],
				list: [],
				currentPage: '/pages/user/person',
				ifOnShow: false,
				unit: '',
				steps:0,
				newTaskStatus1: 0,
				newTaskStatus2: 0,
				newTaskStatus3: 0,
				getTrialMoney:0,
				getRealName:0,
				getFirstRecharge:0,
			};
		},
		onHide() {
			this.ifOnShow = true
		},
		onShow() {
			if (this.ifOnShow) {
				this.getData();
			}
			let pages = getCurrentPages();
			let currPage = pages[pages.length-1];
			if (currPage.$vm.bank_id){
				this.bank_id = currPage.$vm.bank_id;
				// this.loadData();
			}
		},
		onLoad: function(option) {
			 this.getData();
		},
		methods: {
			//user数据
			getData: function() {
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getTaskIndex",
					timestamp:timestamp,
					data:{token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.user = res.data.data.userinfo;
					this.newTaskStatus1=res.data.data.task.newTaskStatus1
					this.newTaskStatus2=res.data.data.task.newTaskStatus2
					this.newTaskStatus3=res.data.data.task.newTaskStatus3
					this.getTrialMoney= res.data.data.task.getTrialMoney
					this.getRealName= res.data.data.task.getRealName
					this.getFirstRecharge=res.data.data.task.getFirstRecharge
					if (this.newTaskStatus2 ==2 && this.newTaskStatus1 == 0){
						this.steps=1;
					}else if(this.newTaskStatus2 == 2 && this.newTaskStatus1 == 1 && this.newTaskStatus3 < 2){
						this.steps=2;
					}else if(this.newTaskStatus3==2 && this.newTaskStatus2 == 2 && this.newTaskStatus1 == 1){
						this.steps=3
					}else{
						this.steps=0
					}
						uni.hideLoading();
				})
			},
			navToUrl: function(url) {
				return uni.navigateTo({
					url: url
				});
			},
			imageError: function(e) {
				this.avatar = '/static/icon_avatar.png';
			},
			receiveTask: function(type){
				if(type == 1){
					this.helper.checkLogin();
					var token = 'token';
					var info = uni.getStorageSync("userinfo");
					if (info.token) {
						token = info.token;
					}
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['token=' + token, 'timestamp=' + timestamp]);
					this.helper.req({
						api: "doTrialMoney",
						timestamp: timestamp,
						data: {
							token: token
						},
						header: {
							sign: sign
						},
						method: 'POST',
					}).then(res => {
						uni.showModal({
							title: "提示",
							content: res.data.message,
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
					
							}
						})
						this.newTaskStatus1 = 1
						this.steps=2
						uni.hideLoading();
					})
				}else if(type == 2){
					this.helper.checkLogin();
					var token = 'token';
					var info = uni.getStorageSync("userinfo");
					if (info.token) {
						token = info.token;
					}
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['token=' + token, 'timestamp=' + timestamp]);
					this.helper.req({
						api: "doRealName",
						timestamp: timestamp,
						data: {
							token: token
						},
						header: {
							sign: sign
						},
						method: 'POST',
					}).then(res => {
						uni.showModal({
							title: "提示",
							content: res.data.message,
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
					
							}
						})
						this.newTaskStatus2 = 2
						this.steps=1
						uni.hideLoading();
					})					
					
				}else if(type == 3){
					this.helper.checkLogin();
					var token = 'token';
					var info = uni.getStorageSync("userinfo");
					if (info.token) {
						token = info.token;
					}
					let timestamp = this.helper.now();
					let sign = this.helper.setSign(['token=' + token, 'timestamp=' + timestamp]);
					this.helper.req({
						api: "doFirstrecharge",
						timestamp: timestamp,
						data: {
							token: token
						},
						header: {
							sign: sign
						},
						method: 'POST',
					}).then(res => {
						uni.showModal({
							title: "提示",
							content: res.data.message,
							showCancel: false,
							confirmText: "确定",
							success: function(res) {
					
							}
						})
						this.newTaskStatus3 = 2
						this.steps=3
						uni.hideLoading();
					})					
										
					
				}
				uni.showToast({
				    title: '提交中',
				    //将值设置为 success 或者直接不用写icon这个参数
				    icon: 'success',
				    //显示持续时间为 1秒
				    duration: 1000
				})
			}
		},
	};
</script>

<style lang="scss">
	page {
		font-size: 3.46667vw;
		color: #56595d;
		background-color: #ddeafd;
	}
	
	.newuser{
		min-height: 800px;
		position: relative;
	}
	.newuser_tit{
		width: 120px;
		height: 30px;
		position: absolute;
		top: 30px;
		left: 20px;
	}
	.newuser_icon{
		width: 150px;
		height: 110px;
		position: absolute;
		top: 20px;
		right: 20px;
		z-index: 2;
	}
	.newuser_contain{
		width: 90%;
		position: absolute;
		top: 80px;
		left: 5%;
		height: 120px;
		background: #fff;
		border-radius: 8px;
		z-index: 1;
	}
	.bar_progress{
		width: 94%;
		height: 50px;
		position: absolute;
		top: 45px;
		left: 3%;
		z-index: 2;
	}
	
	.bartask{
		width: 50%;
		height: 30px;
		position: absolute;
		top: 220px;
		left: 25%;
	}
	
	.taskList{
		width: 90%;
		position: absolute;
		top: 260px;
		left: 5%;
		padding: 10px 0;
	}
	.taskItem{
		width: 100%;
		height: 70px;
		padding: 10px;
		background: #fff;
		border-radius: 6px;
		margin-bottom: 10px;
		position: relative;
	}
	.task_tit{
		position: absolute;
		top: 14px;
		left: 70px;
		font-size: 14px;
		font-weight: 600;
	}
	.task_score{
		position: absolute;
		top: 36px;
		left: 86px;
		color:#881707;
	}
	.task_btn{
		position: absolute;
		top: 20px;
		right: 10px;
		padding: 6px 10px;
		color:#fff;
		background: #fea829;
		border-radius: 8px;
	}
	.task_btn_rev{
		position: absolute;
		top: 20px;
		right: 10px;
		padding: 6px 10px;
		color:#fff;
		background: #ffc672;
		border-radius: 8px;
	}
	
	.icon{
		position: absolute;
		top: 15px;
		left: 16px;
		width: 40px;
		height: 40px;
	}
	.coin{
		position: absolute;
		top: 36px;
		left: 68px;
		width: 16px;
		height: 16px;
	}

</style>
<!-- index -->
<style lang="scss" scoped>
	.tab-bar-footer {
		background-color: #fff;
		border-radius: 3.2vw;
		margin: 3.33333vw auto 0;
		    margin-bottom: 60px;
			padding: 16px 0;
		width: 96.8vw;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
	}

	.tab-bar {
		padding-bottom: 18px;
		background-color: #fff;
		border-radius: 3.2vw;
		margin: 3.33333vw auto 0;
		width: 96.8vw;
		box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);

	}
</style>
<!-- uni-grid -->
<style lang="scss" scoped>
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		margin-top: 10upx;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
</style>